<template>
  <div>
    <div class="worksbox">
      <div class="fontW-7 font-36 color-yellow font-f-ib text-c mgb-50">{{$t('WorkerSet.title')}}</div>
      <div class="fontW-7 font-36 color-yellow font-f-ib text-c">{{$t('WorkerSet.isWater')}}</div>
      <div class="border-3-ff border-r pd-10">
        <div class="flex_w_start_s">
          <div  v-for="item in upload_waterData" :key="item.id" class="imgBox">
            <div class="border-r border-1-ff" style="width:100%">
            <img :src="item.img_url" alt="" style="width:100%">
          </div>
        </div>
        </div>
      </div>
      <div class="fontW-7 font-30 color-f text-c mgt-100">{{$t('WorkerSet.date')}}<img class="mgl-20" src="../../assets/icon/arrow-down-b-fill.svg" alt=""></div>
    </div>
     <div class="worksF flex_w_start_s">
      <div  class="border-1-ff border-r imgBox" style="width:18%" v-for="item in works_set" :key="item.id">
        <div class="pdlr-20">
          <img :src="item.img_url" alt="" style="width:100%">
          <div class="flex-s-between pdtb-10">
            <el-button class="border-n bg-yellow color-0 flex" type="primary">{{$t('WorkerSet.save')}}</el-button>
            <el-button class="border-n bg-yellow color-0 flex" type="primary">{{$t('WorkerSet.create')}}</el-button>
          </div>
        </div>
        <div class="fontW-7 font-14 color-f bd_t-1_f5 pdlr-20 flex-s-between ">
          <div>{{$t('WorkerSet.date')}}</div>
          <div>{{item.date}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {upload_waterData, works_set} from '../../mock/data'
export default {
  data () {
    return {
      upload_waterData: upload_waterData,
      works_set: works_set
    }
  }
}
</script>
<style lang="less" scoped>
.worksbox{
  width: 90%;
  margin: 20px auto;
    .imgBox{
    width: 18%;
    margin: 1%;
  }
}
.worksF {
  width: 92%;
  margin: 20px auto;
    .imgBox{
    width: 18%;
    margin: 1%;
  }
  .el-button--primary:focus, .el-button--primary:hover {
  background: #FFD500;
  }
}
</style>
